<%@ page import="pojo.Question" %>
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<html>
<head>
    <title>考题管理</title>
    <jsp:include page="teacher_menu.jsp"></jsp:include>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 引入各种CSS样式表 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/font-change.css">
    <%--    图标--%>
    <link rel="stylesheet" href="icon/iconfont.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4336496_3iu2a7l8bg8.css">
    <!--引入jquery和bootstrap -->
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <style>
        #table th {
            text-align: center;
            height: 45px;
        }

        #table tbody tr:hover {
            background-color: #66afe9;
            color: white;
        }

        .content_input .search_field { /*输入框样式*/
            margin-top: 20px;
            float: left;
            width: 60%;
            height: 38px;
            border-radius: 5px;
            border: 1px solid #3388FF;
        }

        .content_input .search_btn { /*按钮样式*/
            width: 80px;
            height: 40px;
            margin-top: 20px;
            margin-left: 20px;
            background-color: dodgerblue;
        }

        .content_input .search_btn:hover { /*按钮覆盖样式*/
            background-color: #2e6da4;
            color: ivory;
        }

        #shake-button {
            margin-left: 20%;
            font-size: 20px;
        }

        #shake-button:hover {
            animation: shake 0.5s;
            animation-iteration-count: infinite;
        }

        @keyframes shake {
            0% {
                transform: translate(1px, 1px) rotate(0deg);
            }
            10% {
                transform: translate(-1px, -2px) rotate(-1deg);
            }
            20% {
                transform: translate(-3px, 0px) rotate(1deg);
            }
            30% {
                transform: translate(3px, 2px) rotate(0deg);
            }
            40% {
                transform: translate(1px, -1px) rotate(1deg);
            }
            50% {
                transform: translate(-1px, 2px) rotate(-1deg);
            }
            60% {
                transform: translate(-3px, 1px) rotate(0deg);
            }
            70% {
                transform: translate(3px, 1px) rotate(-1deg);
            }
            80% {
                transform: translate(-1px, -1px) rotate(1deg);
            }
            90% {
                transform: translate(1px, 2px) rotate(0deg);
            }
            100% {
                transform: translate(1px, -2px) rotate(-1deg);
            }
        }
        .modal{
            z-index: 9999;
        }
        .modal-title{
            z-index: 11;
        }
        .modal-body {
            width: 800px;
        }
        .modal-body input[type=text], select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid royalblue;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 10px;

        }
        .my-select {
            width: 100%;
            padding: 10px;
            border: 1px solid royalblue;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 10px;
            color: dimgray;
        }
    </style>
</head>
<body>
<%
    String mess=(String)session.getAttribute("message");
    if(mess!=null && !"".equals(mess)){
%>
<script type="text/javascript">
    alert("<%=mess%>");
</script>
<%
        session.setAttribute("message", "");
    } %>
<div style="background-color: #66afe9;display: inline-block;margin-top: 10px;float: left;margin-left: 20%;height: 80px;width: 300px;text-align: center; border-radius:0px;">
    <h1 style="color:white;text-shadow: 2px 2px 2px dodgerblue;line-height: 40px;border-radius:2px;font-size: 25px">
        考题管理</h1>
</div>
<div style="margin-left: 35%;margin-top:10px;width: 60%;height:80px;background-color: #66afe9; ">
    <form style="padding-left: 10%" action="${pageContext.request.contextPath }/searchQuestionByC_name" method="POST">
        <div class="content_input">
            <%--查询--%>
            <input class="search_field" type="text" placeholder="请输入课程名称" name="c_name" id="c_name">
            <input type="submit" class="btn btn-primary search_btn" value="查询">
            <%--所有--%>
            <form style="padding-left: 10%" action="${pageContext.request.contextPath }/loadQuestionList" method="POST">
                <input type="submit" value="所有" class="btn btn-primary search_btn">
            </form>
        </div>
    </form>
</div>
<div style="margin-top: 20px">
    <br>
    <button type="submit" class="btn btn-primary" id="shake-button" onclick='location.href=("add_question.jsp")'>新增</button>
    <br>
</div>
<div class="table-responsive" style="margin-left: 20%;width: 75%">
    <table class="table table-striped bg-info table-bordered" id="table" style="font-size: 20px">
        <thead>
        <tr>
            <th>试题ID</th>
            <th>课程</th>
            <th>题目类型</th>
            <th>题干内容</th>
            <th>标准答案</th>
            <th>选项A</th>
            <th>选项B</th>
            <th>选项C</th>
            <th>选项D</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody>
        <!--  展示试题信息-->
        <%
            List<Question> questions = (List<Question>) session.getAttribute("get_questions");
            if (questions == null || questions.isEmpty()) {
        %>
        <tr>
            <td colspan="11" style="text-align: center">数据为空</td>
        </tr>
        <%
        } else {
            for (Question c : questions) {
        %>
        <tr>
            <%
                session.setAttribute("question",c);
            %>
            <td><%=c.getQ_id()%><input type="hidden" value="<%=c.getQ_id()%>">
            </td>
            <td><%=c.getC_name()%>
            </td>
            <td><%=c.getQ_type()%>
            </td>
            <td><%=c.getQ_content()%>
            </td>
            <td><%=c.getQ_standard()%>
            </td>
            <td><%=c.getOp_A()%>
            </td>
            <td><%=c.getOp_B()%>
            </td>
            <td><%=c.getOp_C()%>
            </td>
            <td><%=c.getOp_D()%>
            </td>
            <td>
                <input type="button" id=updateBtn" class="btn btn-info" onclick="update(this)" value="修改"></input>
                <input type="button" id=deleteBtn" class="btn btn-danger" onclick="delet(this)" value="删除"></input>
            </td>
        </tr>
        <%
                }
            }
        %>
        </tbody>
    </table>
</div>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 800px">
            <div class="modal-header" style="background-color: #2e6da4">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title" id="myModalLabel">
                    <p style="color: #ebebeb">修改试题</p>
                </h4>
            </div>
            <form action="${pageContext.request.contextPath}/updateQuestion" method="post" id="updateQuestion">
                <div class="modal-body" style="color: dimgray">
                    <input type="text" id="q_id" name="q_id" class="hidden">
                    课程名称：<input type="text" id="c_name1" name="c_name" size="20px"><br>
                    试题类型：<br><select class="my-select" id="q_type" name="q_type">
                    <option value="单选题">单选题</option>
                    <option value="多选题">多选题</option>
                    <option value="判断题">判断题</option>
                </select><br>
                    试题内容：<input type="text" id="q_content" name="q_content" size="20px" value=""><br>
                    标准答案：<input type="text" id="q_standard" name="q_standard" size="20px" value=""><br>
                    选项A：<input type="text" id="op_A" name="op_A" size="20px" value=""><br>
                    选项B：<input type="text" id="op_B" name="op_B" size="20px" value=""><br>
                    选项C：<input type="text" id="op_C" name="op_C" size="20px" value=""><br>
                    选项D：<input type="text" id="op_D" name="op_D" size="20px" value=""><br><br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <input type="button" class="btn btn-primary" value="提交更改" onclick="up()">
                    </input>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 800px">
            <div class="modal-header" style="background-color: #2e6da4">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title" id="myModalLabel2">
                    <p style="color: #ebebeb">删除试题</p>
                </h4>
            </div>
            <form action="${pageContext.request.contextPath}/deleteQuestion" method="post">
                <div class="modal-body" style="color: dimgray">
                    您选中了编号为<input type="text" value="" id="delete_id" name="delete_id" readonly="readonly" style="text-align: center">的试题，确认删除？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary" id="deleteComfirm">
                        确认
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    //消除空格
    function myTrim(x) {
        return x.replace(/^\s+|\s+$/gm,'');}
    function update(obj) {
        var tds = $(obj).parent().parent().find('td');//获取table列数据
        $("#q_id").val(tds.eq(0).text());
        $("#c_name1").val(tds.eq(1).text());
        $("#q_type").val(tds.eq(2).text());
        $("#q_content").val(tds.eq(3).text());
        $("#q_standard").val(tds.eq(4).text());
        $("#op_A").val(tds.eq(5).text());
        $("#op_B").val(tds.eq(6).text());
        $("#op_C").val(tds.eq(7).text());
        $("#op_D").val(tds.eq(8).text());
        $('#updateModal').modal({show:true})
    }
    function delet(obj) {
        var tds = $(obj).parent().parent().find('td');
        $("#delete_id").val(tds.eq(0).text());
        $('#deleteModal').modal({show:true})
    }
    function up(){
        //提交form表单前判断
        var  q_type=document.getElementById("q_type");//select对象
        var index=q_type.selectedIndex ;//选中选项的索引
        //var type=myTrim(q_type);//消除空格
        var c_name=myTrim($("#c_name1").val());
        var q_standard=myTrim($("#q_standard").val());
        var op_A=myTrim($("#op_A").val());
        var op_B=myTrim($("#op_B").val());
        var op_C=myTrim($("#op_C").val());
        var op_D=myTrim($("#op_D").val());
        var q_content=myTrim($("#q_content").val());
        if(index===-1){
            alert("请选择一种试题类型！");
            return;
        }else if(c_name===null || c_name===""){
            alert("课程名称不可为空，请填写！");
            return;
        }else if(q_standard===null || q_standard===""){
            alert("标准答案不可为空，请填写！");
            return;
        }else if(op_A===null || op_A==="") {
            alert("选项A不可为空，请填写！");
            return;
        }else if(op_B===null || op_B==="") {
            alert("选项B不可为空，请填写！");
            return;
        }else {
            //试题类型为单选题或多选题时，CD选项不可为空
            if (q_type.options[index].value === "单选题" || q_type.options[index].value === "多选题") {
                if (op_C === null || op_C === "") {
                    alert("选项C不可为空，请填写！");
                    return;
                } else if (op_D === null || op_D === "") {
                    alert("选项D不可为空，请填写！");
                    return;
                }
            }
            if (q_content === null || q_content == "") {
                alert("试题内容不可为空，请填写！");
                return;
            } else {//均不为空，或判断题只有CD为空，可以提交
                $("#updateQuestion").submit();
                return false;
            }
        }
    }
</script>
</body>
</html>